import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './Detail.less';
import article from "../../models/article";

const { Description } = DescriptionList;

const progressColumns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '当前进度',
    dataIndex: 'rate',
    key: 'rate',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: text =>
      text === 'success' ? (
        <Badge status="success" text="成功" />
      ) : (
        <Badge status="processing" text="进行中" />
      ),
  },
  {
    title: '操作员ID',
    dataIndex: 'operator',
    key: 'operator',
  },
  {
    title: '耗时',
    dataIndex: 'cost',
    key: 'cost',
  },
];

export default
@connect(({ article, loading }) => ({
  article,
  loading: loading.effects['article/detail'],
}))
class Detail extends Component {
  componentDidMount() {
    // const articleID=this.props.match.params.id;
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'article/detail',
    //   payload:articleID
    // });
  }

  render() {
    const { article:{detail}, loading } = this.props;
    function createMarkup(str) { return {__html: str}; };
    return (
      <PageHeaderWrapper title="文章详情">
        <Card bordered={false}>
          <DescriptionList size="large" title="基本信息" style={{ marginBottom: 32 }}>
            <Description term="文章标题">{detail.title}</Description>
            <Description term="文章描述">{detail.summary}</Description>
            <Description term="文章类别">{detail.categorys&&detail.categorys.length>0?detail.categorys.join("，"):"暂无"}</Description>
            <Description term="文章标签">{detail.tags&&detail.tags.length>0?detail.tags.join("，"):"暂无"}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="文章详情" style={{ marginBottom: 32 }}>
            <div dangerouslySetInnerHTML={createMarkup(detail.body)}>
            </div>
          </DescriptionList>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
